// app global css
@import 'sass'

$fgColor: #9932CC
$bgColor: #155799

.toc .q-item.q-item--active
  background: #e3f2ff

.menu .q-router-link--active
  background: #e3f2ff

.toc .q-item
  border-radius: 10px 0 0 10px
  margin-top: 1px
  margin-bottom: 1px

.menu .q-item
  border-radius: 0 10px 10px 0
  margin-top: 1px
  margin-bottom: 1px

.quasar
  opacity: 0.5

.byline
  opacity: 0.5

.byline a
  color: unset

.donate
  position: absolute
  right: 10px
  top: 10px
  opacity: 0.5

.example-title
  cursor: pointer
  &:after
    content: ' #'
    opacity: 0
  &:hover:after
    opacity: 1

body
  padding: 0
  margin: 0
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif
  line-height: 1.5
  background-color: #f8f8ff
  color: #606c71

a
  color: #1e6bb8
  text-decoration: none
  // &:hover
  //   text-decoration: underline

.body--dark
  a
    color: $grey-2

.btn
  display: inline-block
  margin-bottom: 1rem
  color: rgba(255, 255, 255, 0.7)
  background-color: rgba(255, 255, 255, 0.08)
  border-color: rgba(255, 255, 255, 0.2)
  border-style: solid
  border-width: 1px
  border-radius: 0.3rem
  transition: color 0.2s, background-color 0.2s, border-color 0.2s

  &:hover
    color: rgba(255, 255, 255, 0.8)
    text-decoration: none
    background-color: rgba(255, 255, 255, 0.2)
    border-color: rgba(255, 255, 255, 0.3)

.btn + .btn
  margin-left: 1rem

.project-name
  font-weight: 700

@media screen and (min-width: 42em) and (max-width: 64em)
  .btn
    font-size: 0.9rem

@media screen and (max-width: 42em)
  .btn
    display: block
    width: 100%
    font-size: 0.9rem
  .btn + .btn
    margin-left: 0
  .byline
    left: 0
    align-text: center

.page-header
  position: relative
  color: #fff
  text-align: center
  background-color: $bgColor
  background-image: linear-gradient(120deg, $bgColor, $fgColor)

@media screen and (min-width: 64em)
  .page-header
    padding: 1rem 2rem

@media screen and (min-width: 42em) and (max-width: 64em)
  .page-header
    padding: .5rem 1rem

@media screen and (max-width: 42em)
  .page-header
    padding: .5rem 1rem

  .project-name
    font-weight: 700
    margin-top: 0
    margin-bottom: 0.1rem

@media screen and (min-width: 64em)
  .project-name
    font-size: 4.25rem
    line-height: unset

@media screen and (min-width: 42em) and (max-width: 64em)
  .project-name
    font-size: 3.25rem
    line-height: unset

@media screen and (max-width: 42em)
  .project-name
    font-size: 2.75rem
    line-height: unset

  .project-tagline
    font-weight: normal
    opacity: 0.7

@media screen and (min-width: 64em)
  .project-tagline
    font-size: 1.75rem
    line-height: unset

@media screen and (min-width: 42em) and (max-width: 64em)
  .project-tagline
    font-size: 1.25rem
    line-height: unset

@media screen and (max-width: 42em)
  .project-tagline
    font-size: 1rem
    line-height: unset

.main-content :first-child
  margin-top: 0
.main-content img
  max-width: 100%
.main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5, .main-content h6
  margin-top: 2rem
  margin-bottom: 1rem
  font-weight: normal
  color: #159957
.main-content p
  margin-bottom: 1em
.main-content code
  padding: 2px 4px
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace
  font-size: 0.9rem
  color: #383e41
  background-color: #f3f6fa
  border-radius: 0.3rem
.main-content pre
  padding: 0.8rem
  margin-top: 0
  margin-bottom: 1rem
  font: 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace
  color: #567482
  word-wrap: normal
  background-color: #f3f6fa
  border: solid 1px #dce6f0
  border-radius: 0.3rem
.main-content pre > code
  padding: 0
  margin: 0
  font-size: 0.9rem
  color: #567482
  word-break: normal
  white-space: pre
  background: transparent
  border: 0
.main-content .highlight
  margin-bottom: 1rem
.main-content .highlight pre
  margin-bottom: 0
  word-break: normal
.main-content .highlight pre, .main-content pre
  padding: 0.8rem
  overflow: auto
  font-size: 0.9rem
  line-height: 1.45
  border-radius: 0.3rem
.main-content pre code, .main-content pre tt
  display: inline
  max-width: initial
  padding: 0
  margin: 0
  overflow: initial
  line-height: inherit
  word-wrap: normal
  background-color: transparent
  border: 0
.main-content pre code:before, .main-content pre code:after, .main-content pre tt:before, .main-content pre tt:after
  content: normal
.main-content ul, .main-content ol
  margin-top: 0
.main-content blockquote
  padding: 0 1rem
  margin-left: 0
  color: #819198
  border-left: 0.3rem solid #dce6f0
.main-content blockquote > :first-child
  margin-top: 0
.main-content blockquote > :last-child
  margin-bottom: 0
.main-content table
  display: block
  width: 100%
  overflow: auto
  word-break: normal
  word-break: keep-all
.main-content table th
  font-weight: bold
.main-content table th, .main-content table td
  padding: 0.5rem 1rem
  border: 1px solid #e9ebec
.main-content dl
  padding: 0
.main-content dl dt
  padding: 0
  margin-top: 1rem
  font-size: 1rem
  font-weight: bold
.main-content dl dd
  padding: 0
  margin-bottom: 1rem
.main-content hr
  height: 2px
  padding: 0
  margin: 1rem 0
  background-color: #eff0f1
  border: 0

@media screen and (min-width: 64em)
  .main-content
    max-width: 64rem
    padding: 2rem 6rem
    margin: 0 auto
    font-size: 1.1rem

@media screen and (min-width: 42em) and (max-width: 64em)
  .main-content
    padding: 2rem 4rem
    font-size: 1.1rem

@media screen and (max-width: 42em)
  .main-content
    padding: 2rem 1rem
    font-size: 1rem

.site-footer
  padding-top: 2rem
  margin-top: 2rem
  border-top: solid 1px #eff0f1

.site-footer-owner
  display: block
  font-weight: bold

.site-footer-credits
  color: #819198

@media screen and (min-width: 64em)
  .site-footer
    font-size: 1rem

@media screen and (min-width: 42em) and (max-width: 64em)
  .site-footer
    font-size: 1rem

@media screen and (max-width: 42em)
  .site-footer
    font-size: 0.9rem
